<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="./css/products.css">
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .product-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.2s;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .product-info {
            padding: 15px;
        }

        .product-title {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: #333;
        }

        .product-price {
            color: #e53935;
            font-size: 20px;
            font-weight: bold;
            margin: 10px 0;
        }

        .product-description {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        } */

        .load-more {
            display: block;
            width: 200px;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .load-more:hover {
            background-color: #45a049;
        }

        .no-products {
            text-align: center;
            color: #666;
            margin-top: 40px;
        }
    </style>
</head>

<body class="bg-gray-100 text-gray-800">

    <div class="hidden z-50 fixed h-full w-full bg-gray-100" id="sm-search-box">
        <div class="search-bar flex items-center justify-between bg-white shadow-md p-4 mx-auto ">
            <button class="block p-2 " id="sm-search-return">
                <svg t="1747722656832" class="icon w-6 h-8" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5004" width="200" height="200">
                    <path
                        d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
                        fill="" p-id="5005"></path>
                </svg>
            </button>

            <input type="text" placeholder="搜索商品..." id="sm-normal-search"
                class="p-2 flex-1 mx-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pkured" />

            <button class="block p-2" id="sm-begin-search" onclick="searchProducts()">
                <svg t="1747652398649" class="icon w-6 h-6" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5011">
                    <path
                        d="M415.59889935 818.40673751c-103.69194019 0-207.38388041-39.48836529-286.31642412-118.42090898-157.86508737-157.87981634-157.86508737-414.78248979 0-572.66230613 157.85035841-157.85035841 414.76776082-157.90927428 572.64757719 0 157.86508737 157.87981634 157.86508737 414.78248979 0 572.66230613-78.93254368 78.93254368-182.63921287 118.42090898-286.33115307 118.42090898z m0-725.22496474c-82.09927197 0-164.21327292 31.25487175-226.70828746 93.74988629-125.00475803 125.00475803-125.00475803 328.44127481 0 453.44603281 125.01948701 124.9753001 328.41181686 125.03421596 453.43130386 0 125.00475803-125.00475803 125.00475803-328.44127481 0-453.44603281-62.5097435-62.49501453-144.60901547-93.74988627-226.7230164-93.74988629z"
                        fill="#2c2c2c" p-id="5012"></path>
                    <path
                        d="M973.48804978 1013.69813456c-10.78160515 0-21.57793927-4.10938229-29.79670383-12.34287584L658.31757585 715.95203069c-16.46698708-16.46698708-16.46698708-43.14114955 0-59.60813666s43.14114955-16.46698708 59.60813665 0l285.37377009 285.38849908c16.46698708 16.46698708 16.46698708 43.14114955 0 59.60813663a42.07329932 42.07329932 0 0 1-29.81143281 12.35760482z"
                        fill="#2c2c2c" p-id="5013"></path>
                </svg>
            </button>
        </div>
        <div class="m-4 text-[1rem] text-left text-gray-500">
            搜索历史
        </div>
        <div class="mt-4 mx-auto z-50 text-[1rem]">
            <div class="flex mx-3 gap-4 flex-wrap" id="sm-search-history-list">
                <!--- 历史记录 -->
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <header class="bg-white shadow-md">
        <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
            <h1 class="text-xl font-bold text-pkured">PKU跳蚤市场</h1>

            <div class="hidden sm:flex max-w-xl mx-auto px-8 flex-1 relative flex-col">
                <div>
                    <input type="text" placeholder="搜索商品..." id="normal-search"
                        class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pkured" />
                    <button class="block absolute right-8 top-0 p-2" onclick="searchProducts()">
                        <svg t="1747652398649" class="icon w-6 h-6" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5011">
                            <path
                                d="M415.59889935 818.40673751c-103.69194019 0-207.38388041-39.48836529-286.31642412-118.42090898-157.86508737-157.87981634-157.86508737-414.78248979 0-572.66230613 157.85035841-157.85035841 414.76776082-157.90927428 572.64757719 0 157.86508737 157.87981634 157.86508737 414.78248979 0 572.66230613-78.93254368 78.93254368-182.63921287 118.42090898-286.33115307 118.42090898z m0-725.22496474c-82.09927197 0-164.21327292 31.25487175-226.70828746 93.74988629-125.00475803 125.00475803-125.00475803 328.44127481 0 453.44603281 125.01948701 124.9753001 328.41181686 125.03421596 453.43130386 0 125.00475803-125.00475803 125.00475803-328.44127481 0-453.44603281-62.5097435-62.49501453-144.60901547-93.74988627-226.7230164-93.74988629z"
                                fill="#2c2c2c" p-id="5012"></path>
                            <path
                                d="M973.48804978 1013.69813456c-10.78160515 0-21.57793927-4.10938229-29.79670383-12.34287584L658.31757585 715.95203069c-16.46698708-16.46698708-16.46698708-43.14114955 0-59.60813666s43.14114955-16.46698708 59.60813665 0l285.37377009 285.38849908c16.46698708 16.46698708 16.46698708 43.14114955 0 59.60813663a42.07329932 42.07329932 0 0 1-29.81143281 12.35760482z"
                                fill="#2c2c2c" p-id="5013"></path>
                        </svg>
                    </button>
                </div>
                <div id="search-history"
                    class="absolute top-12 left-0 w-full mt-2 mx-auto px-4 hidden text-center z-50">
                    <div class="bg-white shadow-lg rounded-lg" id="search-history-list">
                        <!--历史搜索记录-->
                    </div>
                </div>
            </div>

            <nav class="hidden md:flex space-x-6 justify-between items-center">
                <a href="/profile.html" class="hover:text-pkured">个人资料</a>
                <a href="/profile.html?section=published" class="hover:text-pkured">我的发布</a>
                <a href="/profile.html?section=favorites" class="hover:text-pkured">我的收藏</a>
                <button class="hover:text-pkured" onclick="logout()">登出</button>
            </nav>
            <div class="flex md:hidden items-center w-15 justify-between">
                <button class="sm:hidden p-1" id="sm-search-btn">
                    <svg t="1747652398649" class="icon w-6 h-6" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5011">
                        <path
                            d="M415.59889935 818.40673751c-103.69194019 0-207.38388041-39.48836529-286.31642412-118.42090898-157.86508737-157.87981634-157.86508737-414.78248979 0-572.66230613 157.85035841-157.85035841 414.76776082-157.90927428 572.64757719 0 157.86508737 157.87981634 157.86508737 414.78248979 0 572.66230613-78.93254368 78.93254368-182.63921287 118.42090898-286.33115307 118.42090898z m0-725.22496474c-82.09927197 0-164.21327292 31.25487175-226.70828746 93.74988629-125.00475803 125.00475803-125.00475803 328.44127481 0 453.44603281 125.01948701 124.9753001 328.41181686 125.03421596 453.43130386 0 125.00475803-125.00475803 125.00475803-328.44127481 0-453.44603281-62.5097435-62.49501453-144.60901547-93.74988627-226.7230164-93.74988629z"
                            fill="#2c2c2c" p-id="5012"></path>
                        <path
                            d="M973.48804978 1013.69813456c-10.78160515 0-21.57793927-4.10938229-29.79670383-12.34287584L658.31757585 715.95203069c-16.46698708-16.46698708-16.46698708-43.14114955 0-59.60813666s43.14114955-16.46698708 59.60813665 0l285.37377009 285.38849908c16.46698708 16.46698708 16.46698708 43.14114955 0 59.60813663a42.07329932 42.07329932 0 0 1-29.81143281 12.35760482z"
                            fill="#2c2c2c" p-id="5013"></path>
                    </svg>
                </button>
                <div class="relative flex flex-col items-center" id="user-menu">
                    <button class="md:hidden text-gray-600 p-1">
                        <svg t="1747653580225" class="icon w-8 h-8" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6843" width="200" height="200">
                            <path
                                d="M92 725c0-9 6-15 15-15h810c9 0 15 6 15 15v90c0 9-6 15-15 15h-810c-9 0-15-6-15-15v-90zM92 209c0-9 6-15 15-15h810c9 0 15 6 15 15v90c0 9-6 15-15 15h-810c-9 0-15-6-15-15v-90z m0 258c0-9 6-15 15-15h810c9 0 15 6 15 15v90c0 9-6 15-15 15h-810c-9 0-15-6-15-15v-90z"
                                fill="#6D6D6D" p-id="6844"></path>
                        </svg>
                    </button>

                    <div class="absolute top-8 right-0 sm:right-auto w-28 bg-white shadow-lg rounded-lg mt-2 hidden text-center z-50"
                        id="menu">
                        <a href="/profile.html" class="block px-4 py-2 hover:bg-gray-100">个人资料</a>
                        <a href="/profile.html?section=published" class="block px-4 py-2 hover:bg-gray-100">我的发布</a>
                        <a href="/profile.html?section=favorites" class="block px-4 py-2 hover:bg-gray-100">我的收藏</a>
                        <button class="block px-4 py-2 hover:bg-gray-100 w-full" onclick="logout()">登出</button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="products-grid" id="products-grid">
            <!-- 商品卡片将通过JavaScript动态添加 -->
        </div>

        <button class="load-more" id="load-more" onclick="loadMoreProducts()" style="display: none;">
            加载更多
        </button>
    </div>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/products.js"></script>
    <script>
        $(document).ready(function () {
            $('#user-menu').click(function () {
                $('#menu').show();
            });
            $('#user-menu').mouseleave(function () {
                $('#menu').hide();
            });
            $('#sm-search-btn').click(function () {
                $('#sm-search-box').removeClass('hidden');
                $("#sm-search-box").addClass('block');
            });
            $('#sm-search-return').click(function () {
                $('#sm-search-box').removeClass('block');
                $("#sm-search-box").addClass('hidden');
            });
            $('#sm-begin-search').click(function () {
                $('#sm-search-box').removeClass('block');
                $("#sm-search-box").addClass('hidden');
            });
            $('#normal-search').focus(function () {
                $('#search-history').show();
            });

            // $('#normal-search').blur(function () {
            //     setTimeout(function () {
            //         $('#search-history').removeClass('block');
            //         $("#search-history").addClass('hidden');
            //     }, 100);
            // });
        });
    </script>
</body>

</html>